<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Avengers Memory Game</title>

    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css">
</head>
<body>
    
    <div class="title">
        <h1>AVENGERS: Endgame</h1><hr>
        <div class="scorePannel"><span class="moves">0</span> &nbsp;步&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="timer">0</span>&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="stars">
            <li><i class="fa-star">★</i></li>
            <li><i class="fa-star">★</i></li>
            <li><i class="fa-star">★</i></li>
        </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="refresh" onclick=startGame()>↺</span>
    </div><hr>
    </div>       
    <div id="game"></div>

    <div id="popup1" class="overlay">
        <div class="popup">
            <h2>Congratulations</h2>
            <a class="close" href=# >×</a>
            <div class="content-1">
                你拯救了复联英雄啦！
            </div>
            <div class="content-2">
                <p>你走了 <span id=finalMove> </span> 步 </p>
                <p>用了 <span id=totalTime> </span> </p>
                <p>你获得了 <span id=starRating></span> </p>
            </div>
            <button id="play-again" onclick="playAgain()">
                Play again 
            </button>
        </div>
    </div>
    




<script src="js/main.js"></script>
</body>
</html>